<template>
	<navBar></navBar>
	<view class="content">
		<view class="refer">
			<view class="title">
				我要卖车
			</view>
			<text class="text">提交信息，快速获取评估价</text>
			<view class="mobile">
				<input type="tel" placeholder="请输入手机号" class="home_topBoxInput" name="" id="">
				<button class="home_topBoxButton">立即估值</button>
			</view>
		</view>

		<tabControl></tabControl>

		<view class="vehicle">
			<text class="pitch_title">便捷选车</text>
			<view class="brands">
				<view class="brands_item" v-for="item,i in brands[0]">
					<image :src="item.logo" mode="" class="logo"></image>
					<text class="label">{{item.label}}</text>
				</view>
			</view>
			<view class="prices">
				<view class="prices_item" v-for="item,i in prices[0]">
					{{item.label}}
				</view>
			</view>
			<view class="prices">
				<view class="prices_item" v-for="item,i in models[0]">
					{{item.label}}
				</view>
			</view>

			<view class="vehicle_title">
				<text class="pitch_title">二手车</text>
				<text class="span">查看更多 <uni-icons class="input-uni-icon" type="forward" size="12" color="#999" />
				</text>
			</view>
			<view class="vehicle_cent">
				<view class="vehicle_item" v-for="item in vehicles[0]">
					<image class="vehicle_img" :src="item.cover" mode=""></image>
					<view class="center">
						<view class="title">
							<text v-if="item.reportAssess" class="span"> 腾发自营</text>
							<text v-else-if="item.saleType == 2" class="span"> 限时特惠</text>
							<text v-else-if="item.saleType == 1" class="span" style="background-color: #1851ee;">
								限时特惠</text>

							{{item.carName}}
						</view>
						<view class="span">
							<text>{{item.dateOfRegistration }}</text>
							<text> / {{item.mileage}}万公里</text>
						</view>
						<text class="price">{{item.currentPrice}}万</text>
					</view>

				</view>
			</view>

			<view class="vehicle_title">
				<text class="pitch_title">新车</text>
				<text class="span">查看更多 <uni-icons class="input-uni-icon" type="forward" size="12" color="#999" />
				</text>
			</view>

			<view class="new_car">
				<view class="title">{{newCar.content.carBrandMarker}}</view>
				<view class="label">
					<text>{{newCar.content.type}}</text>
					<text style="background-color: #f0f0f0; color: #000;">{{newCar.content.colorLabel}}</text>
				</view>
				<view class="play">
					{{newCar.content.currentPrice}}万
					<text>指导价 -万/优惠-元</text>
				</view>
			</view>


			<view class="vehicle_title">
				<text class="pitch_title">新闻咨询</text>
				<text class="span">查看更多 <uni-icons class="input-uni-icon" type="forward" size="12" color="#999" />
				</text>
			</view>

			<view class="vehicle_cent">
				<view class="vehicle_item" v-for="item in journalisms[0]">
					<image class="vehicle_img" :src="item.cover" mode=""></image>
					<view class="center">
						<view class="title">
							{{item.title}}
						</view>
						<view class="text"> {{item.simple}} </view>
						<text class="read">阅读：{{item.readingVolume}} &ensp;
							{{item.releaseTime.split('-')[0]}}年{{item.releaseTime.split('-')[1]}}月</text>
					</view>

				</view>
			</view>

		</view>

	</view>
</template>

<script setup>
	import navBar from "../../components/navBar.vue";
	import tabControl from "../../components/tabControl.vue";
	import {
		getConvenient,
		getList,
		getNewCar,
		getWebsite,
	} from "../../ajax/ajax.js";
	import {
		onLoad,
		onReady
	} from '@dcloudio/uni-app';
	import {
		ref,
		reactive
	} from "vue";


	const brands = reactive([]);
	const prices = reactive([]);
	const models = reactive([]);
	const vehicles = reactive([]);
	const newCar = reactive({
		content: {}
	});
	const journalisms = reactive([]);


	onLoad(() => {
		console.log('初始化时执行')
		getApp().globalData.index = 0;
	})

	onReady(() => {
		console.log('初始化时执行')
		getConvenient().then(res => {
			// console.log(res, res.data.data);
			brands.splice(0);
			brands.push(res.data.data.convenientBrands);
			prices.push(res.data.data.convenientPrices);
			models.push(res.data.data.convenientModels);
			// console.log("Brands", brands,prices);
		});

		getList().then(res => {
			const date = new Date()
			// console.log(res);
			vehicles.push(res.data.data.content)
			vehicles[0].forEach(item => {
				date.setTime(item.dateOfRegistration)
				const string = date.toLocaleDateString().split("/");
				const dateString = string[0].concat("年").concat(string[1]).concat("月")
				item.dateOfRegistration = dateString
				// console.log("时间戳",item.dateOfRegistration,date.toLocaleDateString());
			})
			// console.log(vehicles);
		});

		getNewCar().then(res => {
			// console.log(res,res.data.data.content[0]);
			newCar.content = res.data.data.content[0];
			// console.log(newCar);
		});

		getWebsite().then(res => {
			console.log(res);
			journalisms.push(res.data.data.splice(0, 4));
			console.log('journalisms', journalisms);
		});
	})
</script>

<style lang="scss">
	.content {
		width: 750rpx;
		// height: 800rpx;
		// border: 1px solid;

		.refer {
			width: 750px;
			height: 320rpx;
			background-image: url("../../static/home_guche.6eb9a788.png");
			background-size: 50%;
			background-repeat: no-repeat;
			background-position: 0 0;

			.title {
				font-size: 10rpx;
				font-weight: 600;
				margin: 20rpx 0;
				padding: 0 20rpx;
				border-left: 10rpx solid #0055ff;
			}

			.text {
				margin: 2.53333vw 0 8.13333vw 4vw;
				height: 4.4vw;
				font-size: 3.2vw;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #5685fe;
				line-height: 4.4vw;
			}

			.mobile {
				display: flex;
				margin: 85rpx 0 0 0;

				.home_topBoxInput {
					font-size: 22rpx;
					margin-left: 4vw;
					padding-left: 5.33333vw;
					width: 61.33333vw;
					height: 10.13333vw;
					background: #fff;
					border-radius: 2.13333vw 0 0 2.13333vw;
					border: 1px solid #f0f0f0;
					border-right: none;
				}

				.home_topBoxButton {
					margin: 0;
					width: 25.6vw;
					height: 10.8vw;
					background: #5685fe;
					border-radius: 0 2.13333vw 2.13333vw 0;
					border: .26667vw solid #f0f0f0;
					font-size: 3.73333vw;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #fff;
					// line-height: 5.33333vw;
				}
			}


		}

		.vehicle {
			width: 750rpx;

			.brands {
				display: flex;
				width: 750rpx;
				// height: 300rpx;

				.brands_item {
					width: 150rpx;
					height: 180rpx;
					text-align: center;
					font-size: 14rpx;

					.logo {
						width: 120rpx;
						height: 120rpx;
					}

					.label {
						display: block;
					}
				}


			}

			.prices {
				display: flex;
				justify-content: space-around;
				align-items: center;
				font-size: 10rpx;
				width: 750rpx;
				height: 100rpx;

				.prices_item {
					text-align: center;
					width: 118rpx;
					padding: 10rpx 25rpx;
					background-color: #f6f6f6;
					border-radius: 30rpx;
				}
			}

			.vehicle_title {
				display: flex;
				justify-content: space-between;
				align-items: center;

				.span {
					font-size: 10rpx;
					color: #999;
				}
			}

			.vehicle_cent {
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				width: 750rpx;
				// height: 400rpx;

				.vehicle_item {
					width: 350rpx;
					height: 580rpx;
					border-radius: 20rpx;
					overflow: hidden;
					margin-right: 5rpx;

					.vehicle_img {
						width: 100%;
						height: 50%;
					}

					.center {
						width: 320rpx;
						margin: 0 auto;

						.title {
							font-size: 32rpx;
							font-weight: 600;

							.span {
								font-size: 10rpx;
								font-weight: 400;
								background-color: #ee5e0a;
								color: #fff;
								border-radius: 10rpx;
							}
						}

						.span {
							font-size: 10rpx;
							color: #999;
						}

						.price {
							color: red;
							font-size: 34rpx;
							font-weight: 600;
						}

						.read {
							font-size: 25rpx;
							color: #999;
						}

						.text {
							width: 300rpx;
							font-size: 32rpx;
							color: #606060;
							white-space: nowrap;
							overflow: hidden;
							text-overflow: ellipsis;
						}
					}


				}
			}

			.new_car {
				width: 700rpx;
				margin: 0 auto;

				.title {
					font-size: 38rpx;
					font-weight: 600;
					margin: 10rpx 0;
				}

				.label {

					text {
						font-size: 20rpx;
						padding: 6rpx 10rpx;
						background-color: #0055ff;
						margin: 0 10rpx;
						color: #fff;
						border-radius: 10rpx;
					}
				}

				.play {
					margin: 30rpx 0;
					font-size: 40rpx;
					font-weight: 600;
					color: red;

					text {
						font-size: 25rpx;
						color: #999;
						font-weight: 400;
					}
				}
			}
		}
	}

	.pitch_title {
		display: block;
		font-size: 34rpx;
		font-weight: 600;
		margin: 20rpx 0;
		padding: 0 20rpx;
		border-left: 10rpx solid #0055ff;

	}
</style>